<!--首页设计-->
<template>
  <el-card shadow="never" class="aui-card--fill" v-loading="loading" style="background-color: #FFFFFF;">
    <div class="flex_wrap flex_rows flex_align_start">
      <div class="bg_f" style="width: 400px;min-height: 100px;padding: 20px; background-color: #f5f5f5;margin-right: 10px;">
        <div>
          基础模块
        </div>
            <vue-draggable
                v-model="designList"
                :animation="300"
                :sort="false"
                :clone="clone"
                :group="{ name: 'people', pull: 'clone', put: false }"
                class="flex_wrap flex_center flex_rows"
            >
              <div class="flex_jufy_center bg_f" v-for="(item,index) in designList" :key="item.id"
                   style="padding: 10px 20px;color: #333333;margin-bottom: 5px;margin-right: 10px;height: 50px;">
                {{item.dictLabel}}
              </div>
            </vue-draggable>
        <div style="margin-top: 10px;">
          页面模块
        </div>
        <vue-draggable
            v-model="pageList"
            :animation="300"
            :sort="false"
            :clone="clone"
            :group="{ name: 'people', pull: 'clone', put: false }"
            class="flex_wrap flex_center flex_rows"
        >
          <div class="flex_jufy_center bg_f" v-for="(item,index) in pageList" :key="item.id"
               style="padding: 10px 20px;color: #333333;margin-bottom: 5px;margin-right: 10px;height: 50px;">
            {{item.dictLabel}}
          </div>
        </vue-draggable>
      </div>
<!--      首页预览-->
      <div class="flex_columns bg_f" style="width: 500px;min-height: 100px;padding: 20px 0 0; background-color: #f5f5f5;margin-right: 10px;">
        <div style="margin-left: 20px;">
          首页预览
        </div>
        <vue-draggable
            v-model="twoList"
            :animation="300"
            group="people"
            ghostClass="ghost"
        style="margin: 0 20px">
        <div class="flex_columns" style="position: relative;" v-for="(item,index) in twoList" :key="item.id">
          <div class="flex_row_reverse" style="position: absolute;z-index: 10; right: 0;top: 0;padding: 10px 0;">
            <i class="el-icon-circle-close" @click="deleteItem(index)"
               style="font-size: 25px;"></i>
          </div>
<!--          轮播板块-->
          <div v-if="item.dictValue==='1'" class="bg_f" @click="isShowCk(item,index)">
            <el-carousel height="200px">
              <el-carousel-item v-for="(item2,index2) in carouselList" :key="index2">
                <el-image :src="item2.imageUrl" fit="cover"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
<!--          分类板块-->
          <div v-if="item.dictValue==='2'" class="bg_f" @click="isShowCk(item,index)">
            <el-skeleton style="width: 100%;">
              <template slot="template">
                <div class="flex_wrap flex_between flex_center" style="width: 500px;">
                  <div class="flex_jufy_center flex_columns" style="margin-bottom: 10px;" v-for="(item2,index2) in classList" :key="index2">
                    <el-image :src="item2.imageUrl" style="width: 240px;" fit="cover"></el-image>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
<!--          文章板块-->
          <div v-if="item.dictValue==='3'" class="bg_f" @click="isShowCk(item,index)">
            <el-skeleton style="width: 100%;">
              <template slot="template">
                <div class="flex_columns">
                  <div class="flex_between flex_center" style="margin-bottom: 20px;">
                    <el-skeleton-item variant="p" style="width: 50px" />
                    <el-skeleton-item variant="p" style="width: 50px" />
                  </div>
                  <div class="flex_columns">
                    <div class="flex_center flex_between" style="margin-bottom: 20px;" v-for="(item2,index2) in 2" :key="index2">
                      <div class="flex_wrap flex_space_around" style="max-width: 300px;height: 80px;">
                        <el-skeleton-item variant="p" style="width: 300px;" />
                        <el-skeleton-item variant="p" style="width: 300px" />
                      </div>
                      <div style="margin-left: 30px;">
                        <el-skeleton-item variant="image" style="width: 80px; height: 80px;" />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
          <!--          菜单板块-->
          <div v-if="item.dictValue==='4'" class="bg_f" @click="isShowCk(item,index)">
            <el-skeleton style="width: 100%;">
              <template slot="template">
                <div class="flex_wrap flex_between flex_center">
                  <div class="flex_jufy_center flex_columns" v-for="(item2,index2) in menuList" :key="index2">
                    <el-image fit="fill" :src="item2.imageUrl" style="width: 70px;height: 70px;"></el-image>
                    <div style="margin-top: 20px;">
                      {{item2.pageName}}
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
<!--          全部商品-->
          <div v-if="item.dictValue==='5'"class="bg_f" @click="isShowCk(item,index)">
            <el-skeleton style="width: 500px;">
              <template slot="template">
                <div class="flex_columns">
                  <div class="flex_between flex_center" style="margin-bottom: 20px;">
                    <el-skeleton-item variant="p" style="width: 50px" />
                    <el-skeleton-item variant="p" style="width: 50px" />
                  </div>
                  <div class="flex_between flex_center flex_wrap">
                    <div class="flex_columns" style="margin-bottom: 30px;width: 50%;" v-for="(item2,index2) in 2" :key="index2">
                      <div style="margin-bottom: 10px;">
                        <el-skeleton-item variant="image" style="width: 230px; height: 230px;" />
                      </div>
                      <div class="flex_columns" style="max-width: 230px;">
                        <el-skeleton-item variant="p" style="width: 230px;margin-bottom: 10px;" />
                        <el-skeleton-item variant="p" style="width: 230px" />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
<!--          新品上新板块-->
          <div v-if="item.dictValue==='6'" class="bg_f" @click="isShowCk(item,index)">
            <el-skeleton style="width: 100%;">
              <template slot="template">
                <div class="flex_columns">
                  <div class="flex_between flex_center" style="margin-bottom: 20px;">
                    <el-skeleton-item variant="p" style="width: 50px" />
                    <el-skeleton-item variant="p" style="width: 50px" />
                  </div>
                  <div class="flex_columns">
                    <el-carousel height="200px">
                      <el-carousel-item v-for="(item2,index2) in launchList" :key="index2">
                        <el-image :src="item2.imageUrl" fit="cover"></el-image>
                      </el-carousel-item>
                    </el-carousel>
                    <div class="flex_center flex_between" style="margin: 20px 0;">
                      <div class="flex_rows flex_center">
                        <div style="margin-right: 20px;">
                          <el-skeleton-item variant="image" style="width: 80px; height: 80px;" />
                        </div>
                        <div class="flex_wrap flex_space_around" style="max-width: 120px;height: 80px;">
                          <el-skeleton-item variant="p" style="width: 100px;" />
                          <el-skeleton-item variant="p" style="width: 100px" />
                        </div>
                      </div>
                      <div class="flex_rows flex_center">
                        <div style="margin-right: 20px;">
                          <el-skeleton-item variant="image" style="width: 80px; height: 80px;" />
                        </div>
                        <div class="flex_wrap flex_space_around" style="max-width: 120px;height: 80px;">
                          <el-skeleton-item variant="p" style="width: 100px;" />
                          <el-skeleton-item variant="p" style="width: 100px" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
<!--          定制中心板块-->
          <div v-if="item.dictValue==='7'" class="bg_f" @click="isShowCk(item,index)">
            <el-skeleton style="width: 100%;">
              <template slot="template">
                <div class="flex_jufy_center flex_columns">
                  <el-image  v-for="(item2,index2) in customizeList" :key="index2"
                             fit="fill" :src="item2.imageUrl" style="width: 100%;"></el-image>
                </div>
              </template>
            </el-skeleton>
          </div>
        </div>
      </vue-draggable>
        <!--        底部板块-->
        <div class="tabBar_bottom flex_between flex_center bg_f">
          <div class="flex_columns flex_jufy_center" style="margin-bottom: 20px;" v-for="(item2,index2) in 4" :key="index2">
            <el-skeleton-item variant="image" style="width: 50px; height: 50px;" />
            <el-skeleton-item variant="p" style="width: 50px;margin-top: 10px;" />
          </div>
        </div>
      </div>
      <!--      编辑板块  -->
      <div class="flex_columns bg_f"
           style="min-width: 300px;min-height: 100px;
           padding: 20px; background-color: #f5f5f5;
           position: fixed;right: 40px;">
        <div style="margin-bottom: 10px;">
          页面管理
        </div>
        <div class="flex_rows flex_center flex_wrap">
          <div style="margin-right: 10px;" v-if="$hasPermission('api:configPage:save')">
            <el-button type="success" @click="addOrUpdateHandle()">
              新增
            </el-button>
          </div>
          <div style="margin-right: 10px;" >
            <el-button type="primary" @click="saveCk()">
              保存
            </el-button>
          </div>
        </div>
        <div class="flex_columns  bg_f" style="padding: 10px;position: relative" v-for="(item,index) in showList" :key="index">
          <div class="flex_row_reverse" style="position: absolute; right: 0;top: 0;" v-if="$hasPermission('api:configPage:delete')">
            <i class="el-icon-circle-close" @click="deleteHandle(item.id)"
               style="font-size: 25px;"></i>
          </div>
          <div class="flex_row_reverse" style="position: absolute; right: 0;bottom: 0;">
            <i class="el-icon-edit" @click="addOrUpdateHandle(item.id)"
               style="font-size: 25px;"></i>
          </div>
          <div class="flex_center flex_between" style="min-height: 100px;">
            <el-image fit="fill" :src="item.imageUrl" style="width: 100px;height: 100px;"></el-image>
            <div class="flex_columns" style="min-width: 200px;margin-left: 20px;">
              <div>名称：{{item.pageName}}</div>
              <div>参数：{{item.pageParam}}</div>
              <div>位置：{{ $getDictLabel("pageLocation", item.pageLocation) }}</div>
              <div>路径：{{ $getDictLabel("pagePath", item.pagePath) }}</div>
            </div>
          </div>
        </div>
      </div>
      <!--      end-->
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { VueDraggable } from 'vue-draggable-plus';
import AddOrUpdate from "@/views/modules/service/configPageAddOrUpdate.vue";
import {getDictDataList} from "@/utils";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/configPage/page',
        getDataListIsPage: true,
        deleteURL: '/api/configPage',
        deleteIsBatch: true       // 此页面是否在创建时，调用查询数据列表接口？
      },
      dataForm: {
        id: '',
        imageUrl: '',            //页面外观
        pageLocation: '',        //页面位置
        pageName: '',            //页面名称
        pageParam: '',           //页面参数
        pagePath: '',	           //页面路径
      },
      loading: false,             //加载框
      isShow:false,               //是否显示编辑板块
      dataItem: null,             //编辑板块选中数据
      dataList: [],               //数据列表
      carouselList:[],            //轮播数据
      menuList:[],                //菜单数据
      articleList:[],             //文章数据
      classList:[],               //分类数据
      launchList:[],              //新品上新数据
      customizeList:[],           //定制中心图块数据
      showList:[],                //弹窗数据
      designList:[                //公用模块
        // {
        //   dictLabel: '文章资讯',
        //   dictValue: '3',
        //   id: 3,
        //   sort: 3,
        // },

        {
          dictLabel: '全部商品',
          dictValue: '5',
          id: 5,
          sort: 5,
        },
      ],
      //页面模块
      pageList:[                //页面模块
        {
          dictLabel: '轮播板块',
          dictValue: '1',
          id: 1,
          sort: 1,
        },
        // {
        //   dictLabel: '分类板块',
        //   dictValue: '2',
        //   id: 2,
        //   sort: 2,
        // },
        // {
        //   dictLabel: '菜单板块',
        //   dictValue: '4',
        //   id: 4,
        //   sort: 4,
        // },
        // {
        //   dictLabel: '新品上新',
        //   dictValue: '6',
        //   id: 6,
        //   sort: 6,
        // },
        {
          dictLabel: '定制中心图块',
          dictValue: '7',
          id: 7,
          sort: 7,
        },
      ],
      twoList:[{
        dictLabel: '轮播板块',
        dictValue: '1',
        id: 1,
        sort: 1,
      }],
    }
  },
  watch: {
    'dataList'(){
      this.screen()
    }
  },
  components: {
    AddOrUpdate,
    VueDraggable

  },
  created() {
    let _this = this
    this.getDict()
    setTimeout(function() {
      _this.screen()
    }, 1000)
  },
  mounted() {
  },
  methods:{
    //获取首页字典
    getDict() {
      let it = {
        page: 1,                    // 当前页码
        limit: 100,                  // 每页数
        total: 0,                   // 总条数
        dictTypeId: '1394155293868032',
      }
      this.$http.get(`/sys/dict/data/page`,{params:it}).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.twoList = res.data.list
      }).catch(() => {
      })
    },
    //保存布局
    saveCk(){
      if (this.twoList.length === 0){
        this.$message.error('请至少保存一块布局')
        return
      }
      this.loading = true
      this.twoList.forEach((item, index) =>{
        item.sort = index + 1
        this.$http.put(`/sys/dict/data`,item).then(({data: res}) => {
          if (res.code !== 0) {
            this.loading = false
            return this.$message.error(res.msg)
          }
        }).catch(() => {})
      })
      let _this = this
      setTimeout(function() {
        _this.loading = false
        _this.$message.success('保存成功！')
        _this.getDict()
      }, 500)

    },
    //筛选数据
    screen(){
      //console.log('screen')
      this.carouselList = []
      this.classList = []
      this.articleList = []
      this.menuList = []
      this.launchList = []
      this.showList = []
      this.customizeList = []
      if (this.dataList.length === 0){
        return
      }
      this.dataList.forEach((item, index) =>{
        if (item.pageLocation === '1'){
          this.carouselList.push(item)
        }
        if (item.pageLocation === '2'){
          this.classList.push(item)
        }
        if (item.pageLocation === '3'){
          this.articleList.push(item)
        }
        if (item.pageLocation === '4'){
          this.menuList.push(item)
        }
        if (item.pageLocation === '6'){
          this.launchList.push(item)
        }
        if (item.pageLocation === '7'){
          this.customizeList.push(item)
        }
        if(this.dataItem && item.pageLocation === this.dataItem.dictValue){
          this.showList.push(item)
        }
      })
      this.getDict()
    },
    clone(element) {
      // console.log(element)
      let is = false
      this.twoList.forEach((item, index) =>{
        if (item.id === element.id){
          is = true
        }
      })
      if (!is) {
        let item = {dictLabel: element.dictLabel,
          dictValue: element.dictValue,
          dictTypeId:'1394155293868032',
          sort: element.sort,}
        this.$http.post('/sys/dict/data', item).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.getDict()
        }).catch(() => {})
        return
      }
      this.$message.error('不能克隆相同类型的板块')
    },
    //删除块
    deleteItem(index){
      if(this.twoList.length=== 1){
        this.$message.error('至少保留一个板块')
        return
      }
      this.$http.delete(`/sys/dict/data`,{data:[this.twoList[index].id]}).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.twoList.splice(index,1)
      }).catch(() => {
      })
    },
    //点击块
    isShowCk(item,index){
      this.dataItem = item
      if(this.dataList.length===0){
        return
      }
      let  li = []
      this.dataList.forEach((item1,index1) =>{
        if (item1.pageLocation === item.dictValue){
          li.push(item1)
        }
      })
      this.showList = li
    }
  }
}
</script>
<style lang="scss" scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.bg_f{
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
}
.tabBar_bottom{
  position: relative;
  bottom: 0;
  border-radius: 0;
}
</style>
